@import "settings";
//@import "foundation";

// Or selectively include components
@import
  "arval-foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "arval-foundation/components/forms",
  "foundation/components/grid",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "arval-foundation/components/reveal",
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
  "foundation/components/offcanvas",
  "foundation/components/visibility";

@import "form";
@import "arval-base";
@import "compass/typography/lists/bullets";
@import "compass/css3";
@import "compass/utilities";


/*************************/
// Generic styles
/*************************/

.separator{
	margin-top: 22px;
}

div.arrow-down {
	width: 100%;
	border-top: 1px solid $arval-arrow-color;
	height: 15px;
	margin: 22px auto rem-calc(23);
	text-align: center;
	background: #ffffff url('assets/arrow-down.png') top center no-repeat;
	&:not(.separator){
		margin: 0 auto rem-calc(23);
	}
	
}

.disabled-cell{
	opacity: 0.2;
}

.dotted-line{
	height: 45px;
	background: #ffffff url('assets/dotted.gif') center left repeat-x;
}

div.title {
	//height: 120px;
	padding: 20px 0;
}

.welcome{
	.welcome-title {
		display: block;
		font-family: $bnpp-regular;
		margin-left: rem-calc(115);
		margin-right: rem-calc(115);
		margin-top: 0;
		margin-bottom: rem-calc(11);
		font-size: 36px;
		line-height: 38px;
		text-transform: uppercase;
	}

	.welcome-text {
		font-size: 18px;
		line-height: 20px;
		padding-bottom: rem-calc(38);
		margin-top: rem-calc(10);

		&.gray-border{
			border-bottom: 1px solid $arval-gray-border-color;
			padding-bottom: rem-calc(34);
			margin-bottom: rem-calc(8);
		}

		.green {
			color: $arval-green-text-color;
		}
	}
}

form {
	.row {
		
		&.form-section-title{
			margin-bottom: rem-calc(8);
		}
		
		label {
			text-align: left;
			font-family: $arial-default;

			
		}

		& .error {
				label{
					color : $arval-form-label-error-color;

					input[type="text"], input[type="email"] {
						background-color: $arval-form-input-bg-error-color;
		    			border: 1px solid $arval-form-input-border-error-color;
		    			margin-bottom: rem-calc(16);
					}	
				}
				
			}

		input[type="text"], input[type="email"]{
			font-family: $arial-default;
			line-height: 20px;
			height: rem-calc(30);
			padding: rem-calc(4) rem-calc(8) rem-calc(4) rem-calc(8);
		}

		input[type="file"] {
			font-family: $arial-default;
			line-height: 20px;
			height: rem-calc(30);
			padding: 0 0 rem-calc(31) 0;			
		}
	}

	label {
		&.imported {
			color: $arval-form-label-imported-color;

			input, textarea, .styled-select {
				background-color: $arval-form-input-bg-imported-color;
    			border: 1px solid $arval-form-input-border-imported-color;
			}
		}
	}
}

/*************************/
// 00-pagina-presentazione.html
/*************************/

h3.arrow-title, h4.arrow-title{
	height: 30px;
	@extend .sprite-arrow;
	font-family: $arial-default;
	font-size:24px;
	line-height: 30px;
	text-align:left;
	padding-left: 20px;
	font-weight: bold;
}

div.arrow-title-text {
	text-align: left;
	padding-left: 20px;
	font-family: $arial-default;
	font-size:14px;
	line-height: 20px;
	margin-top: rem-calc(1);
}

.come-funziona{
	margin-top: 20px;
	margin-bottom: 30px;
	ul{
		margin: 0;
		padding: 0;
		border-bottom: 1px solid $arval-gray-border-color;
		overflow: hidden;
		padding-bottom: 20px;
		li{
			border-right: 1px solid $arval-gray-border-color;
			width: 232px;
			height: 160px;
			float: left;
			margin: 0;
			padding: 0;
			list-style: none;
			img{ padding-top: 22px; }
			h5{
				font-family: $bnpp-bold;
				font-size: 20px;
				line-height: 21px;
				color: $arval-bg-color;
				text-transform: uppercase;
				margin: 13px 0;
				padding: 0;
			}
		}
		li.green-box{
			border:none;
			background: $arval-green-bg-box-color;
			h5{
				color: $arval-btn-text-color;
			}
		}
	}
	
}



.documenti-informazioni {
	margin-top: rem-calc(28);
	margin-bottom: rem-calc(35);

	div{
		float: left;
		width: rem-calc(440px);

		&.documenti-lista {
			margin-left: rem-calc(20);

			ul{
				@include no-bullets;
				text-align: left;
				margin-left: 0px;
				li{
					font-family: $arial-default;
					font-size:14px;
					line-height: 16px;
					margin-bottom: rem-calc(26);

					.flag {
						width: 22px;
						height:21px;
						display:block;
						float: left;
						margin-right: rem-calc(10);

						@extend .sprite-flag;
					}

					.title{
						color: $arval-green-text-color;
						display: block;
						font-family: $bnpp-bold;
						font-size: 20px;
						line-height: 21px;
						text-transform: uppercase;
					}
				}
			}
		}

		&.guida-download {
			margin-left: rem-calc(30);
			border: 3px solid $arval-gray-box-border-color;
			padding: rem-calc(20) 0;

			img{ margin: rem-calc(5) 0}

			.title {
				font-family: $bnpp-bold;
				font-size: 20px;
				line-height: 16px;
				text-transform: uppercase;
				color: $arval-green-text-color;
				margin: rem-calc(5) 0;
			}

			.text {
				font-family: $arial-default;
				font-size:14px;
				line-height: 16px;
				display: block;
				text-align: left;
				margin: rem-calc(15) rem-calc(20);
			}

			.download {
				display: block;
				padding: 0;
				font-family: $arial-default;
				font-size:15px;
				line-height: 40px;
				text-transform: uppercase;
				width: rem-calc(185);
				margin: rem-calc(10) auto;
				span.icon{
					@extend .sprite-arrow-circle-down;
					float: right;
					height: 40px;
					width: 25px;
					margin-right: 10px;
				}
			}
		}
	}
}

.inserisci-richiesta {
	.inserisci {
		@include footer-btn();
	}
}

.inserisci-dati, .inserisci-dati-ritiro {
	text-align: right;
	.inserisci {
		@include footer-btn(24px, 438px, 15px);
	}

	.torna{
		@include back-btn();
	}
}

/*************************/
// 01-dati-anagrafici.html
/*************************/

.form-dati-anagrafici {
	
	.form-left-column {
		padding-left: rem-calc(45);
		padding-right: rem-calc(15);
	}

	.form-center-column{
		padding-left: rem-calc(15);
		padding-right: rem-calc(15);
	}

	.form-right-column{
		padding-left: rem-calc(15);
		padding-right: rem-calc(45);
	}

	.form-separator {
		padding: 0 rem-calc(45) 0 rem-calc(45);
		margin: rem-calc(15) 0 rem-calc(24) 0;
		.gray-border {
			border-bottom: 1px solid $arval-gray-border-color;	
		}
	}
}

.right-align-text {
	text-align: right;
	font-family: $arial-default;
	font-size: 11px;
	line-height: 20px;
	padding-right: rem-calc(15)

}

.errors {
	margin: rem-calc(22) 0;
	padding: 0 rem-calc(45) 0 rem-calc(45);
	.error-text {
		color: $arval-form-error-text-color;
		text-align: left;
		font-family: $arial-default;
		font-size: 16px;
		line-height: 20px;
		font-weight: bold;
		span.icon{
			@extend .sprite-alert;
			float: left;
			height: 16px;
			width: 18px;
			margin-right: rem-calc(10);
		}
	}
}

/*************************/
// 02-dati-auto.html
/*************************/

.accordion{
	.accordion-navigation{
		border-top: 1px solid $arval-bg-color;

		&:not(.active) .row{
			&.step-completed{
				background: $arval-light-green url('assets/flag-big.png') 0 center no-repeat;
				a{color: white;}
			}
		}

		.arrow-down{ display:none; }
		.welcome-title {
			margin-bottom: rem-calc(30);
			margin-top: rem-calc(30);
		}
		
		&.active{
			border: none;
			.arrow-down{ display:block; }
			.welcome-title {
				margin-bottom: 0;
				//margin-top: rem-calc(11);
				margin-top: 0;
			}

			.importa-dati {
				display: block;
				float: left;
				//clear: both;
				padding: rem-calc(8);
				font-family: $arial-default;
				font-size:14px;
				line-height: 15px;
				background: $arval-arrow-color;
				&:hover{
					background: scale-color($arval-arrow-color, $lightness: $button-function-factor);
				}
				
				width: rem-calc(330);
				margin: rem-calc(10) auto 0;
				
				span.icon{
					@extend .sprite-import;
					float: left;
					height: 15px;
					width: 39px;
					margin-right: 8px;
				}
				
			}
			.dati-importati { display:none; }

			.imported{
				.dati-importati {
					display: block;
					float: left;
					//clear: both;
					padding: rem-calc(8);
					font-family: $arial-default;
					font-size:16px;
					line-height: 15px;
					background: white;
					color: #bed731;
					text-align: left;
					
					width: rem-calc(330);
					margin: rem-calc(10) auto 0;

					span.icon{
						@extend .sprite-flag-green;
						float: left;
						height: 16px;
						width: 22px;
						margin-right: 8px;
					}
				}
			}

			.aggiungi-danno {
				display: block;
				text-align: left;
				float: left;
				clear: both;
				padding: rem-calc(8);
				font-family: $arial-default;
				font-size:14px;
				line-height: 15px;
				background: $arval-arrow-color;
				margin-bottom: 0;
				&:hover{
					background: scale-color($arval-arrow-color, $lightness: $button-function-factor);
				}
				$button-bg-color: #00925b;

				width: rem-calc(210);
				
				span.icon{
					float: left;
					height: 15px;
					width: 11px;
					margin-right: 8px;
					font-size: 21px;
					font-weight: bolder;
				}
				
			}

		}


	}

}

.reveal-modal{
	table{
		width: 100%;
		border-spacing: 0;
    	border-collapse: collapse;
		tr{
			
			td{
				height: 56px;
				border: $table-row-border-size $table-row-border-style $table-row-border-color;
				&:hover{ cursor:pointer; background: $table-hover-row-bg;}

				.left{
					width: 90%;
					float: left;
				}

				.right{
					width: 10%;
					float: right;
					text-align: right;
				}

				img{
					width: 73px;
					height: 53px;
					padding-right: rem-calc(20);
				}
				span{
					font-weight: bold;
					text-transform: uppercase;
				}
				label{
					padding-left: rem-calc(10) !important;
				}
			}
		}
	}
	.importa {
		float: right;
		overflow: hidden;
		@include footer-btn(24px, 240px, 15px);
		margin-bottom: 0;
	}
}



.form-dettagli-veicolo, .form-dettagli-ritiro{
	text-align:left;

	input{
		margin-bottom: 0;
		margin-left: 0;
	}

	.cols3-checkbox-list{
		label{ width:32.3%; margin-right:0}
	}

	input.span-side{ float:left}
	.large-3.columns input.span-side{ width: rem-calc(165); margin-right: rem-calc(5)}
	.optional{ height: 120px; }

	input[type="checkbox"] + label{ margin-left: 0}

	.cols5-radio-list{
		margin-top: rem-calc(5);
		input[type="radio"] + label{ 
			margin-left: rem-calc(2); 
			margin-right: rem-calc(12);
			margin-top: rem-calc(7);
			margin-bottom: rem-calc(7);
		}
	}
	.cols3-radio-list{
		margin-top: rem-calc(5);
		input[type="radio"] + label{ margin-left: rem-calc(2); margin-right: rem-calc(15)}
	}
	.cols2-radio-list{
		margin-top: rem-calc(5);
		input[type="radio"] + label{ margin-left: rem-calc(2); margin-right: rem-calc(20)}
	}

	label{
		.info{
			font-style: italic;
			font-size: 12px;
		}
		&.spaced{ margin-top: 20px; }
		&:not(.chioce-label){ line-height: 25px;}
	}

	.citta-ritiro{
		margin-top: rem-calc(2);
	}
}

	

.form-dettagli-ritiro{
	.styled-select.tiny{
		margin-top: rem-calc(10);
	}
	label{
		.info{
			color: $arval-light-gray-text-color;
			font-weight: normal;
		}
	}

}

.form-foto-veicolo{
	margin-bottom: rem-calc(30);

	.foto-label {
		padding-left: rem-calc(32);
		margin:rem-calc(18) 0 rem-calc(25) 0;

		.foto-label-desc {
			font-family: $arial-default;
			font-size:14px;
			line-height: 20px;
			text-align: left;
			display: block;
		}
	}

	.foto-veicolo-box{
		width:155px;
		height:185px;
		margin-left:rem-calc(30);
		float: left;

		&.loaded {
			input[type="file"]{
				display: none;
			}

			.elimina-foto {
				display: block
			}
		}

		&:first-child {
			margin-left: rem-calc(18);
		}

		input[type="file"]{
				display: block;
		}

		.elimina-foto {
			display: none;
			font-family: $arial-default;
			font-size:10px;
			line-height: 32px;
			text-transform: uppercase;
			line-height: 32px;
			text-align: center;
			color: $arval-delete-img-text-color;

			span {
				font-family: $bnpp-bold;
				text-transform: uppercase;
				font-size: 13px;
				margin-right: rem-calc(5);
			}
		}

		.foto {
			width: 155px;
			height: 144px;
			border: 1px solid $arval-dashboard-image-border;
			margin-bottom: rem-calc(8);
			overflow: hidden;
			background-color: $arval-img-bg-color;

			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			transform-style: preserve-3d;

		    img {
				width: 100%;
				height: auto;

				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
			
		}
	}

	.form-separator {
		margin: rem-calc(30) 0 rem-calc(30) 0;
		.gray-border {
			border-bottom: 1px solid $arval-gray-border-color;	
		}
	}

	.danni-attuali, .danni-passati {
		text-align: left;
		margin-top: rem-calc(9);
		padding-left: rem-calc(35);
		label {
			margin-bottom: rem-calc(2);
		}
	}

	.descrizione-danno{ height: 100px; }

	label{
		.info{
			font-style: italic;
			font-size: 12px;
			color: $arval-gray-text-color;
		}
		&.spaced{ margin-top: rem-calc(17); }
	}
}

.numero-documenti {
	margin-top:rem-calc(10);
	img {
		float:left; 
		margin-right: rem-calc(10);
	}
}

.upload-libretto {
	margin-top: rem-calc(10);
	// label{ clear:both}
	// input[type="text"]{
	// 	width: rem-calc(300);
	// 	float: left;
	// }
	input[type="file"]{
		// width: rem-calc(85);
		// float: left;
		&:first-child{
			margin-bottom: rem-calc(10);
		}
	}
}

.upload-foto-box {
	
}

.chioce-label{
	font-weight: normal;
	color: $arval-gray-text-color;
	margin-left: 0 !important;
	&.small{ font-size:12px}
}
[type="radio"] + label.chioce-label{
	margin-top: 7px;
	margin-bottom: 7px;
}
[type="radio"] + label.chioce-label.multi{
	margin-top: 4px;
	margin-bottom: 7px;
}

.tooltip-icon{
	line-height: 25px;
	z-index: 1000;
	position: relative;
	background: white;
	&:focus {
		outline: 0;
	}
}




/*************************/
// 06-a-dashboard-vuota.html
/*************************/

.pannello-controllo {
	.pannello-controllo-box {
		width: 210px;
		height:260px;
		float: left;
		margin: rem-calc(12) 0 0 rem-calc(30);

		&:first-child{
			margin-left: 0;
		}

		&:nth-child(4n + 1) {
			margin-left: 0;
		}

		.header {
			height: 30px;
			text-align: left;
			text-transform: uppercase;
			font-weight: bold;
			font-family: $arial-default;
			font-size:14px;
			line-height: 30px;
		}
		.image {
			height: 200px;
			border-top: 1px solid $arval-dashboard-image-border;
			border-left: 1px solid $arval-dashboard-image-border;
			border-right: 1px solid $arval-dashboard-image-border;

			.foto {
				width: 208px;
				height: 199px;
				border: 1px solid $arval-dashboard-image-border;
				margin-bottom: rem-calc(8);
				overflow: hidden;
				background-color: $arval-img-bg-color;

				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				transform-style: preserve-3d;

			    img {
					width: 100%;
					height: auto;

					position: relative;
					top: 50%;
					transform: translateY(-50%);
				}
				
			}
		}

		&.dati-anagrafici {
			.image {
				background: url(../images/06-dati-anagrafici.gif);
			    background-size: 100% 100%;
			    background-repeat: no-repeat;
			}

			.action {
				.icon:after{
					content: 'Aggiungi Dati Anagrafici';
				}
			}

			&.loaded {
				.image {
					border-color: $arval-dashboard-bg-action-loaded;
					background: url(../images/06-dati-anagrafici-caricati.gif);
				}

				.action {
					background-color: $arval-dashboard-bg-action-loaded;
					
					.icon:after{
						content: 'Modifica Dati Anagrafici';
					}
				}
			}
		}

		&.veicolo {
			.image {
				background: url(../images/06-veicolo.gif);
			    background-size: 100% 100%;
			    background-repeat: no-repeat;
			}

			.action {
				.icon:after{
					content: 'Completa inserimento dati';
				}
			}

			&.loaded {
				.image {
					border-color: $arval-dashboard-bg-action-loaded;
					.foto {
						border: none;
					}
				}
				.action {
					background-color: $arval-dashboard-bg-action-loaded;
					
					.icon:after{
						content: 'Modifica Dati Veicolo';
					}
				}
			}
		}

		.action {
			height: 30px;
			background-color: $arval-dashboard-bg-action;
			color: $arval-dashboard-text-action;

			font-family: $arial-default;
			font-size:14px;
			line-height: 30px;
			font-weight: bold;
			text-align: left;

			padding: 0 rem-calc(10) 0 rem-calc(10);
		}
	}
}

.aggiungi-veicolo {
	text-align: left;
}

.form-invia-auto{

	.informativa-privacy{
		text-align: left;
		margin-bottom: rem-calc(28);

		a{
			color: $arval-info-privacy-font-color;
			text-decoration: underline;
		}
	}
	.invia-auto-arval {
		.invia {
			@include footer-btn(31px, 420px, 15px);
		}
	}
}

.pannello-controllo-errors {
	margin-bottom: rem-calc(23);
	margin-top: rem-calc(15);
	padding: 0 rem-calc(45) 0 rem-calc(45);

	&.no-errors{
		display: none;
	}

	.error-text {
		color: $arval-form-error-text-color;
		font-family: $arial-default;
		font-size: 16px;
		line-height: 20px;
		font-weight: bold;
		display: inline-block;
		margin: 0 auto;
		span.icon{
			@extend .sprite-alert;
			float: left;
			height: 16px;
			width: 18px;
			margin-right: rem-calc(10);
		}
	}
}

